<!-- 菜谱详情页 -->
<template>
  <div class="MenuDetail">
    <!-- 头部导航栏 吸顶-->
    <van-sticky>
      <van-nav-bar title="菜谱详情">
        <template #left>
          <van-icon name="arrow-left" color="#fff" @click="goBack">返回</van-icon>
        </template>
        <template #right>
          <router-link to="/favorites">收藏夹</router-link>
        </template>
      </van-nav-bar>
    </van-sticky>

    <!-- 加载动画 -->
    <xrzp-Loading v-if="!menuDetail"></xrzp-Loading>
    <!-- 展示图 -->
    <template v-if="menuDetail">
      <img class="menuDetail-pic" :src="menuDetail.pic" alt=""/>
      <!-- 菜名 -->
      <span class="menuDetail-name">{{ menuDetail.name }}</span>
      <!-- 标签 只显示4个 -->
      <van-tag  class="menuDetail-tag" type="primary" v-for="(item,index) in tag" :key="index">{{ item }}</van-tag>
      <!-- 简介 -->
      <div class="synopsis">
        <div class="synopsis-head">
          <div class="synopsis-head-left">
            <van-icon name="bulb-o" color="#DC143C" size="20" />
            <span>难度：有挑战</span>
          </div>
          <div class="synopsis-head-right">
            <van-icon class="time" name="underway-o" color="#0000CD" size="20"/>
            <span>时长：{{ menuDetail.cookingtime }}</span>
          </div>
        </div>
        <!-- 图标选择 展开和收缩 -->
        <div class="introduction" @click=" open=!open ">
          <div class="content" :class="{ lineClamp : open }" v-html="menuDetail.content"/>
          <div class="image" v-if="length > 50">
            <!-- 通过v-if判断选择图片 -->
            <img :src="require(`../assets/arrow_${open?'down':'up'}.png`)"/>
            <!-- <img src="../assets/arrow_up.png" v-if="!open"/> -->
            <!-- <img src="../assets/arrow_down.png" v-else/> -->
          </div>
        </div>
      </div>
      <!-- 食材清单 -->
      <div class="ingredients">
        <span class="title">🍳食材清单</span>
        <table border="0" cellspacing="1">
          <thead>
            <th>食材名称</th> <th>食材份量</th> <th>食材类型</th>
          </thead>
          <tbody v-for="(item, index) in material" :key="index">
            <th>{{ item.mname }}</th> <th>{{ item.amount }}</th> <th>{{ item.type ? "主料" : "辅料" }}</th>
          </tbody>
        </table>
      </div>
      <!-- 菜谱步骤 -->
      <div class="menu">
        <div class="menuStep">👩‍🍳烹饪步骤</div>
        <div class="box" v-for="(item, index) in menuDetail.process" :key="index">
          <van-divider class="divider" content-position="left">第 {{ index + 1 }} 步</van-divider>
          <div class="image">
            <img :src="item.pic" :onerror="errorImage" alt=""/>
            <div class="content">
              <span>第{{ index + 1 }}步</span>
            </div>
          </div>
          <!-- 步骤介绍 -->
          <div class="step" v-html="item.pcontent"/>
        </div>
        <van-divider class="divider" content-position="left">END</van-divider>
      </div>
      <!-- 收藏 -->
      <div class="fixed-box" :style="{ bottom: bottom + 'px' }">
        <van-icon name="star" color="#ff5000" class="fixed-box-icon" @click="addFavorite" v-if="isFavorite"/>
        <van-icon name="star-o" class="fixed-box-icon" @click="addFavorite" v-else/>
      </div>
      <!-- 置顶 -->
      <xrzp-Istop></xrzp-Istop>
    </template>
  </div>
</template>

<script>
import { axios_detail } from "@/api/data_axios";
import { mapState } from "vuex";
export default {
  data() {
    return {
      open: true, // class类名控制 展开 关闭
      id:"",
      menuDetail: null,  //菜谱详细数据
      tag:[], // 标签
      length:0, // 字数
      appkey:"b0e7418fe9bef46dcb47a53374ffbef1",
      // 图片加载失败 替换图片
      errorImage:'this.src="' + require('@/assets/headPortrait/1.jpg') + '"',
      isFavorite:false, // 收藏状态
      bottom:29
    };
  },
  computed:{
    ...mapState(["favorite"]),
    material(){
      return this.menuDetail.material.reverse();
    }
  },
  mounted(){
    this.id = this.$route.params.id;
    this.getData();
    this.init();
    window.addEventListener('scroll', this.handleScroll);
  },
  methods: {
    //  获取对应id下的数据
    getData(){
      let data = {
        id:this.id,
        appkey:this.appkey
      }
      axios_detail(data).then(res=>{
        this.menuDetail = res.result.result;
        this.tag = res.result.result.tag.split(",",4);
        this.length = res.result.result.content.length;
      })
    },
    // 滚轮事件
   handleScroll () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      this.bottom = scrollTop > 300 ? 69 : 29 ;
    },
    // 初始化收藏状态
    init(){
      this.isFavorite = this.favorite.indexOf(this.id) !== -1 ;
    },
    // 加入收藏夹
    addFavorite() {
      this.isFavorite = !this.isFavorite;
      this.$store.commit( this.isFavorite ? "addFavorite" : "delFavoriteID",this.id);
    },
    // 返回方法
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
.MenuDetail {
  color: #2c3e50;
  .van-nav-bar {
    background-color: $base-color;
    ::v-deep .van-nav-bar__title{
      font-weight: bold;
    }
    .van-icon{
      font-weight: bold;
    }
  }
  .van-nav-bar__right a {
    color: white;
    font-weight: bold;
  }
  .menuDetail-pic{
    width: 100%;
  }
  .menuDetail-name{
    font-size: 18px;
    padding: 0 16px;
    font-weight: 900;
  }
  .menuDetail-tag{
    margin-right: 10px;
  }
  .synopsis{
    margin: 12px;
    padding: 10px;
    border-radius: 10px;
    background-color: azure;
    .synopsis-head{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .synopsis-head-left{
        span{
          margin-left: 7px;
        }
      }
      .synopsis-head-right{
        .time{
          margin-right: 7px;
        }
      }
    }
    .introduction {
      padding: 10px;
      font-size: 16px;
      .content{
        font-weight: 400;
        width: 92%;
        margin: 0 auto;
        text-align: justify;
      }
      .lineClamp {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        text-overflow: ellipsis;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
      }
      .image{
        position: relative;
        img{
          position: absolute;
          top:5px; 
          left: 50%;
          margin-left: -5px;
        }
      }
    }
  }
  .ingredients{
    .title{
      font-size: 18px;
      padding: 0 16px;
      font-weight: 900;
    }
    table{
      width: 100%;
      border-radius: 10px;
      margin: 12px 0;
      padding: 0 12px;
      overflow: hidden;
      thead{
        background-color: rgb(230,238,251);
        th{
          padding: 10px;
          width: 100px;
        }
      }
      tbody{
        background-color: oldlace;
        th{
          font-weight: 400;
          padding: 4px;
        }
      }
    }
  }
  .menu{
    .menuStep{
      font-size: 18px;
      padding: 0 16px;
      font-weight: 900;
      margin-bottom: 5px;
    }
    .divider{
        margin: 0;
        border-color: yellowgreen;
      }
    .box{
      .image{
        position: relative;
        margin: 12px;
        img{
          width: 100%;
          border-radius: 10px;
        }
        .content{
          width: 74px;
          height: 32px;
          position: absolute;
          top: 0px;
          border-radius: 10px 0px;
          background-color: rgb(24,201,52);
          span{
            position: absolute;
            top: 2px;
            left: 13px;
            color: white;
          }
        }
      }
      .step{
        font-weight: 400;
        margin: 0 20px;
        padding-bottom: 10px;
        text-align: justify;
      }
    }
  }
  .fixed-box{
    position: fixed;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0px 1px 20px 0px rgb(0 0 0 / 10%), inset 0px -1px 0px 0px rgb(0 0 0 / 10%);
    &-icon{
      display: flex;
      justify-content: center;
      font-size: 21px;
      line-height: 30px;
    }
  }
}
</style>
